<template>
	<view class="ocrImgContainer">
		<!-- 摄像头组件 -->
		<camera id="myCamera" :device-position="devicePosition" flash="auto" :style="styleType[styleTypeIndex]">
		</camera>
		<!-- 比例 -->
		<view class="bil" style="margin-top: 24rpx;">
			<view class="bliItem" @click="styleTypeIndex = 0">宽屏</view>
			<view class="bliItem" @click="styleTypeIndex = 1">竖屏</view>
			<view class="bliItem" @click="overturn">翻转</view>
		</view>
		<!-- 拍摄按钮 -->
		<view class="pikceLine">
			<view :class="['clice',state === 2 && 'cliceRed']" @click="pic">
				<view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let cameraContext = null;
	export default {
		data() {
			return {
				devicePosition: 'back',
				styleType: ['width: 100%;height: 300px;', 'width: 100%;height: 500px;'],
				styleTypeIndex: 0,
				state: 1, // 1未开始录像 2录像进行中 
			};
		},
		onReady() {
			cameraContext = wx.createCameraContext();
		},
		methods: {
			overturn() {
				this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
			},
			pic() {
				// 未开始录像 执行录像
				if (this.state === 1) {
					this.state = 2
					// 开始录像
					cameraContext.startRecord({
						selfieMirror: false,
						fail: (err) => {
							console.log(err)
							wx.showToast({
								title: "录制失败",
							});
							this.state = 1
						},
					});
				}
				// 录像中
				else if (this.state === 2) {
					cameraContext.stopRecord({
						success: (res) => {
							this.state = 1
							// 保存视频
							wx.saveVideoToPhotosAlbum({
								filePath: res.tempVideoPath,
								success: (res) => {
									wx.showToast({
										title: "保存成功",
									});
								},
								fail: (err) => {
									wx.showToast({
										title: "保存失败" + err,
									});
								}
							});
						},
						fail: (err) => {
							wx.showToast({
								title: "录制失败" + err,
							});
							this.state = 1
						},
					});
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.ocrImgContainer {
		width: 100%;
		min-height: 100vh;
		padding: 24rpx;
		padding-bottom: 240rpx;

		.pikceLine {
			position: fixed;
			bottom: 60rpx;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: center;

			.clice {
				display: flex;
				width: 80px;
				height: 80px;
				align-items: center;
				justify-content: center;
				border: 5px solid #303447;
				border-radius: 50%;

				>view {
					width: 60px;
					height: 60px;
					border-radius: 50%;
					background-color: #303447;
					transition: all 0.3s;
				}
			}

			.cliceRed {
				>view {
					width: 30px;
					height: 30px;
					border-radius: 0;
					background-color: red;
				}
			}
		}

		.bil {
			display: flex;

			.bliItem {
				width: 100rpx;
				height: 100rpx;
				background-color: #007AFF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin: 0 20rpx;
			}
		}

		// 固定底部
		.bot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			z-index: 999;
			padding: 0 20rpx;
			padding-bottom: 60rpx;
		}
	}
</style>